<template>
	<div class="form-dynamic">
		<el-form ref="form" :model="form" label-position="top">
			<transition-group name="block" tag="div">
				<div class="block-item" v-for="(item, index) in form.workItem" :key="item.id">
					<div class="block-item__index">{{ index + 1 }}</div>

					<el-row>
						<el-col :span="12">
							<el-form-item :label="item.date.label">
								<el-date-picker
									type="daterange"
									v-model="item.date.value"
									format="yyyy年MM月dd日"
									value-format="yyyy-MM-dd"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									unlink-panels
								>
								</el-date-picker>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item :label="item.department.label">
								<el-input v-model="item.department.value"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-form-item :label="item.title.label">
						<el-input v-model="item.title.value"></el-input>
					</el-form-item>

					<el-form-item :label="item.task.label">
						<el-input v-model="item.task.value"></el-input>
					</el-form-item>

					<i class="el-icon-remove block-item--remove" @click="handleRemove(index)"></i>
				</div>
			</transition-group>
		</el-form>

		<div class="block-item--add" @click="handleAdd">点击新增履历</div>
		<div style="text-align: center">
			<el-button type="primary" round @click="handldeSubmit" :loading="submitLoading">提交</el-button>
		</div>
	</div>
</template>

<script>
import { guid } from '@/utils/core'

const workTemplate = {
	date: {
		label: '起止时间',
		value: [],
	},
	department: {
		label: '所在单位',
		value: '',
	},
	title: {
		label: '职务职称',
		value: '',
	},
	task: {
		label: '主要工作',
		value: '',
	},
}

export default {
	name: 'DynamicForm',
	data() {
		return {
			form: {
				workItem: [],
			},
			submitLoading: false,
		}
	},
	created() {
		this.initWorkItem(3)
	},
	methods: {
		initWorkItem(amount) {
			for (let i = amount; i--; ) {
				this.handleAdd()
			}
		},
		handleAdd() {
			const template = Object.assign({}, workTemplate)
			template.id = guid()
			this.form.workItem.push(template)
		},
		handleRemove(index) {
			this.form.workItem.splice(index, 1)
		},
		handldeSubmit() {
			this.$message.success('提交成功！')
		},
	},
}
</script>

<style lang="scss" scoped>
.form-dynamic {
	box-sizing: border-box;
	width: 1000px;
	padding: 20px 100px;
	margin: 0 auto;
	border-radius: 10px;
	background-color: #fff;

	.block-item {
		position: relative;
		box-sizing: border-box;
		width: 800px;
		border-left: 1px solid #e6e6e6;
		border-right: 1px solid #e6e6e6;
		margin: 20px 0px;
		padding: 0px 10px;
		transition: all 1s;
	}

	.block-enter,
	.block-leave-to {
		opacity: 0;
		transform: translateY(30px);
	}

	.block-leave-active {
		position: absolute;
	}

	.block-item--remove {
		position: absolute;
		top: 50%;
		right: -61px;
		transform: translate(0, -11px);
		font-size: 28px;
		color: #d95d5d;
		cursor: pointer;
	}

	.block-item--add {
		margin: 0px -100px 20px -100px;
		height: 200px;
		line-height: 200px;
		text-align: center;
		background: url(~@/assets/images/form/add.jpg) no-repeat;
		background-size: cover;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}

	.block-item__index {
		position: absolute;
		left: -100px;
		top: 50%;
		transform: translate(0, -30px);
		width: 100px;
		height: 60px;
		font-size: 50px;
		font-weight: 500;
		background: linear-gradient(to bottom right, red, blue);
		color: transparent;
		-webkit-background-clip: text;
		text-align: center;
	}
}
</style>

<style>
.form-dynamicm .el-form-item__label {
	line-height: 20px;
}
</style>
